<!-- 入口 -->
<template>
  <div class="vbox">
    <!--头部栏 开始-->
    <el-header class="topWrap">
      <div class="dsfLeft">
        <div class="AppName">
          <img src="@/assets/images/webLogo.png" alt="">
          <span>YSLOCKER</span>
        </div>
        <div class="projectName" style="padding-left:.4rem;" @click="openCollapse">
          <i :class="isCollapse?'icon-caidan-zhankai':'icon-caidan-shouqi'" class="iconStyle iconfont" style="font-size:.38rem!important;"></i>
        </div>
        <div class="projectName">
          {{menuText}}
        </div>
      </div>

      <!-- 头部导航栏开始-->
      <div class="dsf">
        <div class="plr20 titleText">
          <el-button type="primary" size="small" @click="open">{{$t('lan.statistics')}}</el-button>
        </div>
        <div>
          <languageSwitch></languageSwitch>
        </div>
        <div class="plr10 titleText">
          <p style="font-size:.38rem;">
            <span>Hello, {{name}}</span>
          </p>
        </div>
        <div class="plr10">
          <el-tooltip class="item" effect="dark" :content="$t('lan.changePwd')" placement="top-start">
            <i class="iconSize iconfont icon-gerenzhongxin" @click="openPwd = true"></i>
          </el-tooltip>
        </div>
        <div class="plr20">
          <i class="iconSize iconfont icon-tuichu" @click="loginOut"></i>
        </div>
      </div>
      <!-- 头部导航栏结束 -->

    </el-header>
    <!--头部栏 结束-->

    <div class="middleWrap">
      <!--左侧 开始-->
      <aside class="transitionAll" :class="isCollapse?'left1':'left'">
        <el-menu class="el-menu-vertical-demo" @select="openMenu" background-color="#001529" text-color="#f5f5f5" :default-openeds="menuName" :collapse="isCollapse" :collapse-transition="false" :unique-opened="true" router :default-active="menuIndex">
          <!-- <el-menu-item index="/main" route='/main'>
            <i class="iconStyle iconfont icon-shouye"></i>
            <span slot="title">首页</span>
          </el-menu-item> -->
          <div v-for="item in menuList" :key="item.id">
            <el-submenu :index="lanName=='en'?item.englishName:item.name">
              <template slot="title">
                <i class="iconStyle iconfont" :class="isActive?`${item.icon}`:''"></i>
                <span>{{lanName=='en'?item.englishName:item.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item v-for="i in item.subMenuBOList" :key="i.url" :index="i.url" :route='i.url' style="padding-left:65px">
                  <!-- <i class="iconStyle iconfont" :class="isActive?`${item.icon}`:''"></i> -->
                  <span>{{lanName==='en'?i.englishName:i.name}}</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </div>
        </el-menu>
      </aside>
      <div class="transitionAll right" :style="{'paddingLeft':!isCollapse?4+'rem':0}">
        <router-view class="routerView wraper" ref="selectfood"></router-view>
        <el-backtop target=".wraper" :bottom="50">
          <el-tooltip class="item" effect="dark" content="Top" placement="top-start">
            <div class="backTop"> <i class="el-icon-caret-top"></i></div>
          </el-tooltip>
        </el-backtop>
      </div>
      <!-- 组件展示结束 -->
    </div>

    <userIndexModal v-if="openPwd" :open.sync="openPwd"></userIndexModal>
  </div>
</template>
<script>
import userIndexModal from "component/personalSettings/userIndexModal";
import languageSwitch from 'component/languageSwitch'
export default {
  components: { userIndexModal, languageSwitch },
  data () {
    return {
      name: JSON.parse(sessionStorage.getItem('userInfo')).name,//用户名
      amt: JSON.parse(sessionStorage.getItem('userInfo')).amt,//余额
      timeText: '',//显示早上、中午、晚上
      openPwd: false,
      isActive: true,
      menuList: [],//权限菜单列表
      isCollapse: false,
      menuName: [],
      menu: [],
      menuText: '',
      routerName: '',
      roleId: 0,
      lanName: '',
    }
  },
  methods: {
    open () {
      window.open('https://tongji.baidu.com/web/welcome/login')
    },
    //跳转左侧菜单获取面包屑
    openMenu (index, indexPath) {
      this.formatMenu(this.menuList)
    },
    //点击展开收起菜单
    openCollapse () {
      this.isCollapse = !this.isCollapse
    },
    //退出登录
    loginOut () {
      this.$confirm(this.$t('lan.logoutPrompt'), this.$t('lan.prompt'), {
        confirmButtonText: this.$t('lan.confirm'),
        cancelButtonText: this.$t('lan.cancel'),
        type: 'warning'
      }).then(async () => {
        sessionStorage.clear();
        this.$router.push('/')
      }).catch(() => {
      });
    },
    //获取菜单
    async getMenuList () {
      let url = `/menu/queryTreeByRole/${this.roleId}`
      let result = await this.request.httpRequest('GET', url)
      if (result.code == 200) {
        this.menuList = result.data
        this.formatMenu(this.menuList)
      } else {
        this.loading = false
        this.$message({ type: 'error', message: result.msg })
      }
    },
    formatMenu (list) {
      for (let i of list) {
        for (let j of i.subMenuBOList) {
          if (i.id === j.parentId && this.$route.path === j.url) {
            this.menuText = this.lanName === 'en' ? `${i.englishName}/${j.englishName}` : `${i.name}/${j.name}`
          }
        }
      }
    },
    getWeekDay () {
      let time = this.moment().format('H')//获取小时
      if (time < 6) { this.timeText = "凌晨好！" }
      else if (time < 12) { this.timeText = "早上好！" }
      else if (time < 15) { this.timeText = "中午好！" }
      else if (time < 17) { this.timeText = "下午好！" }
      else if (time < 24) { this.timeText = "晚上好！" }
    },
  },
  created () {
    this.lanName = localStorage.getItem('languageSet') || 'en'

    //获取区域信息，获取左侧菜单栏
    Promise.all([this.getWeekDay(), this.getMenuList()])
  },
  computed: {
    menuIndex () {
      //如果是首页就关闭左侧菜单栏
      if (this.$route.path == '/main') {
        this.menuName = []
      }
      return this.$route.path
    },
  },
  watch: {
    '$route' (to) {
      this.formatMenu(this.menuList)
    }
  }
}
</script>

<!--公共样式-->
<style>
.wraper {
  height: calc(100vh - 70px);
  overflow: hidden;
  overflow-x: hidden;
  overflow-y: scroll;
  overflow: auto;
}
.menuItemIcon {
  font-size: 16px !important;
  color: #d9d9d9 !important;
  padding-right: 6px;
}
.iconStyle {
  font-size: 0.32rem !important;
  padding-right: 12px;
  color: #fff;
}
.menuItemIcon:hover {
  color: #409eff !important;
}
.white {
  color: #fff;
}
.mr15 {
  margin-right: 15px;
}
.transitionAll {
  transition: 0.3s ease-in-out;
}
.hideMenuButton {
  height: 40px;
  line-height: 40px;
  width: 0.3rem;
  background: #409eff;
  position: absolute;
  top: 50%;
  left: 3.3rem;
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  border-radius: 2px 0 0 2px;
  color: #fff;
  z-index: 9999;
  cursor: pointer;
}
.showMenuButton {
  height: 40px;
  line-height: 40px;
  width: 0.3rem;
  background: #409eff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  border-radius: 0 2px 2px 0;
  color: #fff;
  z-index: 9999;
  cursor: pointer;
}
.all {
  transition: 0.3s ease-in-out;
}
</style>

<!--私有样式-->
<style scoped>
.titleText {
  margin-left: 0.3rem;
  color: #fff;
}
.titleStyle {
  position: fixed;
  width: 100%;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.349019607843137);
  height: 55px;
  z-index: 9;
}
.openIcon {
  position: relative;
  top: -21px;
  left: 16px;
  font-size: 0.32rem !important;
  color: #9e9e9e !important;
}
.treeStyle {
  margin-left: 4rem;
  width: 3rem;
  height: calc(100vh - 70px);
  position: fixed;
  top: 70px;
}
.titleS {
  height: 55px;
  line-height: 55px;
  text-align: center;
  background: #bbb;
  font-size: 0.36rem;
  color: #333;
}
.treeCon {
  height: calc(100vh - 125px);
  background: #e5e5e5;
  overflow: auto;
}
.el-header {
  background: #33b86c;
  text-align: center;
  padding: 0px;
  height: 70px !important;
  line-height: 70px;
}

.roleName {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
/*顶部栏*/
.topWrap {
  overflow-y: hidden;
  position: relative;
  border-radius: 0px;
  border: none;
  background: #00284d;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0px;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.349019607843137);
}

/*头部logo*/
.AppName {
  color: #fff;
  font-size: 0.38rem;
  text-align: center;
  float: left;
  overflow: hidden;
  width: 4.5rem;
}
.AppName img {
  height: 35px;
  position: relative;
  top: 9px;
  right: 8px;
  border-radius: 3px;
}
.AppName span {
  position: relative;
  right: 20px;
}
.width220 {
  width: 4rem !important;
}
/*项目选择*/
.projectName {
  padding: 0px 5px;
  color: #fff;
  font-size: 0.36rem;
}
.middleWrap {
  width: 100%;
  height: calc(100vh - 70px);
  overflow: auto;
  background: #fff;
}
/*主菜单*/
.left {
  width: 4rem;
  display: block;
  background: #001529;
  padding: 0;
  margin: 0;
  float: left;
  position: fixed;
  overflow: auto;
  height: calc(100vh - 70px);
  /* top:70px; */
}
.left::-webkit-scrollbar {
  display: none;
}
.left1 {
  width: 0;
  display: block;
  background: #001529;
  padding: 0;
  margin: 0;
  float: left;
  position: fixed;
  overflow: auto;
  height: calc(100vh - 70px);
  box-shadow: 0 9px 5px rgba(0, 0, 0, 0.3);
}
/*右侧布局*/
.right {
  width: 100%;
  /* padding-left:7rem; */
  box-sizing: border-box;
}

.right0 {
  width: 100%;
  /* padding-left:3rem; */
  box-sizing: border-box;
}
.routerView {
  color: #000;
  animation-duration: 0.8s;
  animation-fill-mode: both;
  /* backface-visibility: hidden; */
  border-radius: 5px;
  padding-top: 0px;
  padding-right: 20px;
  /* padding-top:54px; */
}
</style>
